<template>
  <view class="pjFilter">
    <view class="title">{{ "配件任务" }}</view>
    <view class="filterContent">
      <view class="filterContent">
        <view class="main">
          <view class="left">
            <view class="leftContent">
              <view
                :class="['leftItem', actOne == index ? 'act' : '']"
                @click="handleClickLeft(index, item)"
                v-for="(item, index) in list"
                :key="index"
              >
                {{ item.name }}
                <view class="redDot" v-if="isShowRedDot(item.childList)"></view>
              </view>
            </view>
          </view>
          <view class="right" v-if="list.length">
            <view
              class="rightContent"
              v-for="(e, j) in list[actOne].children"
              :key="j"
            >
              <view class="levelTitle">
                <view>{{ e.name }}</view>
                <view
                  class="hanleClick"
                  v-if="e.children.length > 6"
                  @click="handleShowMore(e, j)"
                >
                  <view>{{ e.showMore ? "显示更多" : "收起" }}</view>
                  <image
                    class="moreImg"
                    v-if="!e.showMore"
                    src="@/static/images/maintain/sq.png"
                  />
                  <image
                    class="moreImg"
                    v-else
                    src="@/static/images/maintain/zk.png"
                  />
                </view>
              </view>
              <view class="levelList">
                <view
                  v-for="(el, idx) in e.children"
                  :key="idx"
                  @click="choosePart(el, index, j)"
                  class="levelList_item"
                >
                  <view
                    :class="['tagItem', isSelect(el.id) ? 'activeTage' : '']"
                    v-if="e.showMore ? idx < 6 : e.children"
                  >
                    {{ el.name }}
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- end -->
  </view>
</template>

<script>
import { repairFittingSelected } from '@/apis/repair.js';
export default {
	data() {
		return {
			list: [],
			actOne: 0,
			actTwo: 0,
			actThree: '',
			selectArr: [],
		};
	},
	created() {
		this.fetchPartList();
	},
	methods: {
		handleShowMore(item, index) {
			this.list[this.actOne].children[index].showMore =
      !this.list[this.actOne].children[index].showMore;
			console.log(item.showMore,index,'点击更多',this.actOne);
		},
		initData(arr) {
			this.selectArr = arr;
		},
		isShowRedDot(arr) {
			let selectList = this.selectArr.map((item) => item.id);
			return arr.filter((item) => selectList.indexOf(item) > -1).length;
		},
		clickTwo(i) {
			this.actTwo = i;
		},
		clickThree(i) {
			this.actThree = i;
		},

		handleClickLeft(i, item) {
			this.actOne = i;
			// console.log(i,item,1111);
		},
		choosePart(res, index, j) {
			let idx = this.selectArr.findIndex((item) => item.id == res.id);
			if (idx !== -1) {
				this.selectArr.splice(idx, 1);
			} else {
				this.selectArr.push({ id: res.id, parentId: res.parentId });
			}
			console.log(this.selectArr, res.id, 6666);

			this.$emit('choosePart', this.selectArr);
		},
		isSelect(id) {
			// console.log(id,this.selectArr.find(e => e.id == id));
			return this.selectArr.find((e) => e.id == id);
		},
		fetchPartList() {
			repairFittingSelected({}).then((res) => {
				if (res) {
					// this.list = res.data;
					let newArr = res.data.map((item) => {
						let arr = [];
						if (item.children && item.children.length) {
							// console.log(item.children.length,"changdu ");
							item.children.map((e) => {
								if (e.children && e.children.length) {
									e.children.map((j) => {
										arr.push(j.id);
										e.showMore = true;
									});
								}
							});
						}
						// item.childList=arr
						// return item
						return { ...item, childList: arr };
					});
					this.list = newArr;
					console.log(this.list, 333);
				}
			});
		},
	},
};
</script>

<style lang="scss" scoped>
.pjFilter {
  .title {
    color: #333;
    font-size: 30rpx;
    font-weight: 600;
    margin-top: 10rpx;
    margin-bottom: 20rpx;
    padding: 0 30rpx;
  }
  // display: flex;
  .filterContent {
    // height: 300rpx;
    // overflow-y: auto;
  }
  .main {
    display: flex;
  }
  .left {
    background: #f6f6f6;
    width: 232rpx;
    height: 300rpx;
    overflow-y: auto;
    .leftItem {
      // height: 80rpx;
      padding: 20rpx 46rpx;
      display: flex;
      box-sizing: border-box;
      justify-content: center;
      align-items: center;
      background: #f6f6f6;
      font-size: 28rpx;
      color: #666;
      position: relative;
      overflow: hidden; /*文本超出隐藏*/
      text-overflow: ellipsis; /*文本超出显示省略号*/
      white-space: nowrap;
    }
    .redDot {
      width: 10rpx;
      height: 10rpx;
      border-radius: 50%;
      background-color: #e02020;
      position: absolute;
      right: 0;
      top: 0;
    }
    .act {
      color: #0091ff;
      background-color: #fff;
    }
  }

  .right {
    background-color: #fff;
    width: calc(100% - 232rpx);
    padding: 0 30rpx;
    height: 300rpx;
    overflow: auto;
    .rightContent {
      // display: flex;
      // width: 100%;
      // flex-wrap: wrap;
      // padding: 20rpx 0 48rpx 0;
      .levelTitle {
        font-weight: 600;
        color: #333;
        font-size: 28rpx;
        padding: 30rpx 0;
        display: flex;
        justify-content: space-between;
        height: 50rpx;
        align-items: center;
        .hanleClick {
          display: flex;
          color: #0091ff;
          font-size: 24rpx;
          width: 300rpx;
          justify-content: flex-end;
          align-items: center;
          height: 100%;
        }
        .moreImg {
          width: 24rpx;
          height: 24rpx;
        }
      }
      .levelList {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        .levelList_item {
          width: 216rpx;
          display: flex;
        }
      }
    }

    .tagItem {
      width: 216rpx;
      height: 48rpx;
      border: 2rpx solid #cccccc;
      border-radius: 8rpx;
      text-align: center;
      line-height: 48rpx;
      margin-bottom: 20rpx;
      color: #666;
      font-size: 28rpx;
      // padding: 0 16rpx;
      // margin-right: 16rpx;
      overflow: hidden; /*文本超出隐藏*/
      text-overflow: ellipsis; /*文本超出显示省略号*/
      white-space: nowrap;
    }

    .activeTage {
      border-color: #0091ff;
      color: #0091ff;
    }
  }
  .empty {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>
